<template>


        <div class="super_container">

                <myheader :total_price='total' :count='count'></myheader>
            
                <!-- Home -->
            
								
								<!-- Home -->

	<div class="home">
		<div class="parallax_background parallax-window" data-parallax="scroll" ></div>
		<div class="home_container">
			<div class="home_content">
				<div class="home_title">Cart</div>
				<div class="breadcrumbs">
					<ul class="d-flex flex-row align-items-center justify-content-start">
						<li><a href="index.html">Home</a></li>
						<li>Your Cart</li>
					</ul>
				</div>
			</div>
		</div>
	</div>

	<!-- Cart -->

	<div class="cart_section">
		<div class="section_container">
			<div class="container">
				<div class="row">
					<div class="col">
						<div class="cart_container">
							
							<!-- Cart Bar -->
							<div class="cart_bar">
								<ul class="cart_bar_list item_list d-flex flex-row align-items-center justify-content-start">
									<li>Product</li>
									<li>Price</li>
									<li>Quantity</li>
									<li>Total</li>
								</ul>
							</div>

							<!-- Cart Items -->
							<div class="cart_items">
								<ul class="cart_items_list">

									<!-- Cart Item -->
									<li class="cart_item item_list d-flex flex-lg-row flex-column align-items-lg-center align-items-start justify-content-start" v-for="(good,index) in datalist">
										<div class="product d-flex flex-lg-row flex-column align-items-lg-center align-items-start justify-content-start">
											<div><div class="product_image"><img :src="base_url+'/static/upload/'+good.img" alt=""></div></div>
											<div class="product_name"><a :href="'/product?id='+good.id">{{good.name}}</a></div>
										</div>
									
										<div class="product_price text-lg-center product_text"><span>Price: </span>${{good.price}}</div>
										<div class="product_quantity_container">
											<div class="product_quantity ml-lg-auto mr-lg-auto text-center">
												<span class="product_text product_num">{{good.num}}</span>
												<div class="qty_sub qty_button trans_200 text-center" @click="minus(index)"><span>-</span></div>
												<div class="qty_add qty_button trans_200 text-center" @click="add(index)" ><span>+</span></div>
											</div>
										</div>
										<div class="product_total text-lg-center product_text"><span>Total: </span>${{good.price * good.num}}</div>
									</li>
								</ul>
							</div>

							<!-- Cart Buttons -->
							<div class="cart_buttons d-flex flex-row align-items-start justify-content-start">
								<div class="cart_buttons_inner ml-auto d-flex flex-row align-items-start justify-content-start flex-wrap">
									<div class="button button_continue trans_200"><a href="categories.html">continue shopping</a></div>
									<div class="button button_clear trans_200"><a href="categories.html">clear cart</a></div>
									<div class="button button_update trans_200"><a href="categories.html">update cart</a></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="section_container cart_extra_container">
			<div class="container">
				<div class="row">

					<!-- Shipping & Delivery -->
					<div class="col-xxl-6">
						<div class="cart_extra cart_extra_1">
							<div class="cart_extra_content cart_extra_coupon">
								<div class="cart_extra_title">Coupon code</div>
								<div class="coupon_form_container">
					
										<input type="text" class="coupon_input" required="required" v-model="coupon" placeholder="请输入优惠券编码号。。。">
										<button class="coupon_button" @click="Coupon(coupon)">应用优惠码</button>
				
								</div>
								<div class="shipping">
									<div class="cart_extra_title">Shipping Method</div>
									<ul>
										<li class="shipping_option d-flex flex-row align-items-center justify-content-start">
											<label class="radio_container">
												<input type="radio" id="radio_1" name="shipping_radio" class="shipping_radio">
												<span class="radio_mark"></span>
												<span class="radio_text">Next day delivery</span>
											</label>
											<div class="shipping_price ml-auto">$4.99</div>
										</li>
										<li class="shipping_option d-flex flex-row align-items-center justify-content-start">
											<label class="radio_container">
												<input type="radio" id="radio_2" name="shipping_radio" class="shipping_radio">
												<span class="radio_mark"></span>
												<span class="radio_text">Standard delivery</span>
											</label>
											<div class="shipping_price ml-auto">$1.99</div>
										</li>
										<li class="shipping_option d-flex flex-row align-items-center justify-content-start">
											<label class="radio_container">
												<input type="radio" id="radio_3" name="shipping_radio" class="shipping_radio" checked>
												<span class="radio_mark"></span>
												<span class="radio_text">Personal Pickup</span>
											</label>
											<div class="shipping_price ml-auto">Free</div>
										</li>
									</ul>
								</div>
							</div>
						</div>
					</div>

					<!-- Cart Total -->
					<div class="col-xxl-6">
						<div class="cart_extra cart_extra_2">
							<div class="cart_extra_content cart_extra_total">
								<div class="cart_extra_title">Cart Total</div>
								<ul class="cart_extra_total_list">
									<li class="d-flex flex-row align-items-center justify-content-start">
										<div class="cart_extra_total_title">Subtotal</div>
										<div class="cart_extra_total_value ml-auto">$29.90</div>
									</li>
									<li class="d-flex flex-row align-items-center justify-content-start">
										<div class="cart_extra_total_title">Shipping</div>
										<div class="cart_extra_total_value ml-auto">Free</div>
									</li>
									<li class="d-flex flex-row align-items-center justify-content-start">
										<div class="cart_extra_total_title">总价</div>
										<div class="cart_extra_total_value ml-auto" v-if="coupon">$ {{total * coupon_price}}</div>
										<div class="cart_extra_total_value ml-auto" v-else>$ {{total}}</div>
									</li>
								</ul>
								<div class="checkout_button trans_200"><a @click="pay(total*coupon_price)">去支付</a></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
            
                
            
                <!-- Footer -->
            
                <myfooter></myfooter>


            
            
            </div>

      
</template>
      
      
       
      <script>


        import myheader from './header.vue'
        import myfooter from './footer.vue'
		import Cookies from 'js-cookie'
     
      
      export default {
        data () {
          return {
			  money:'',
			postage:0,
			count:0,
			total:0,
            msg: "",
            datalist:[],
            clicked:0,
            upath: '',
          result: '',
		  uping:0,
		  coupon:'',
		  coupon_price:1,
		  token:'',
		  cookie_name:'',
          }
        },
        components: {
        'myheader':myheader,
        'myfooter':myfooter
        },
        mounted:function(){

			this.common.get_menu();
			this.total_price()
			var data = Cookies.get('cart');
			if(data){
				data = JSON.parse(data)
				this.datalist = data;

			}
			this.total_price();
			this.post_redis();
        },
        methods:{
            changetest(index){
                this.clicked = index;
			},
			
			add:function(index){
	
				this.datalist[index].num++;
				Cookies.set('cart',this.datalist,{ expires: 7 })
				this.total_price()
				this.post_redis()

			},
			minus:function(index){

				if( this.datalist[index].num > 1){

				this.datalist[index].num--;
				Cookies.set('cart',this.datalist,{ expires: 7 })

				}
				else{
					var list = this.datalist
					list.splice(index,1)
					Cookies.set('cart',list,{ expires: 7 })
				}
				this.total_price()
				this.post_redis()

			},
			total_price:function(){
				let cartlist = this.datalist;
				this.total = 0
				this.count = 0
            	for(let i=0,l=cartlist.length;i<l;i++){
				this.total = this.postage + this.total + (cartlist[i].price * cartlist[i].num);
				this.count = this.count + cartlist[i].num
				}
			},
			post_redis:function(){
				var add_cart_redis = this.base_url+"/Addcart_redis"
				var _this = this
				var params = {
					'cartlist':JSON.stringify(this.datalist)
				}
				this.axios.post(add_cart_redis,this.qs.stringify(params)).then(function(result) {
				if(result.data['code'] == '200') {
					console.log(result.data.message)

				}
				else {
					_this.msg = result.data.message
					console.log(result.data)
				}

				}); 
			},
			pay:function(money){
				let username = Cookies.get('name')
				var url = this.base_url+"/PayPageHandler"

            //定义中介
            var _this = this;
            //使用axios发送异步请求
            this.axios.post(url,this.qs.stringify({
				price:money,'username':username,
				  data_list:JSON.stringify(this.datalist)
				}))
            .then(function(result){
                console.log(result);
					console.log(result.data)
				window.location.href = result.data
                
            });
			},

             	Coupon:function(coupon){
                    var url = this.base_url+'/Coupon_code'
                    var _this = this
					let token = localStorage.getItem('token')
					var cookie_name = Cookies.get('name')
					console.log(cookie_name)
                    console.log(this.coupon)
                    this.axios.post(url,this.qs.stringify({
                        coupon_code:this.coupon,'token':token,'name':cookie_name
                    })).then(function(result){
                        console.log(result.data.msg)
                        _this.coupon_price = result.data.coupon_price
                        alert(result.data.msg)
                    })
                }
		}

      }
      
      
      </script>
       
      <style>
			@import '../assets/styles/cart.css';
			@import '../assets/styles/cart_responsive.css';
      </style>